<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Schedule</title>
        <link href="css/global.css" rel="stylesheet" type="text/css" />
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="js/global.js"></script>
        <script>
            function toggle(tog){
                if(tog=="NFL"){
                    document.getElementById("byNFLDiv").style.visibility="visible";
                    document.getElementById("byFantasyDiv").style.visibility="hidden";
                }else{
                    document.getElementById("byNFLDiv").style.visibility="hidden";
                    document.getElementById("byFantasyDiv").style.visibility="visible";
                }
            }
        </script>
    </h:head>
    <h:body>
    <div id="background">
        <div class="navy"></div>
        <div id="content">
            <div id="scheduleDiv">
                <span class="whiteHeader">Schedule</span><br/><br/>
                <button class="short" id="byTeam" onclick="toggle('NFL');"><span class="white">NFL</span></button><button class="short" id="byRound" onclick="toggle('Fantasy');"><span class="white">Fantasy</span></button><br/>
                <div id="byNFLDiv">
                    <table id="nflschedule">
                        <tr>
                            <td class="month">&#60; Oct</td>
                            <td class="month" colspan="5"><span class="whiteHeader">Nov</span></td>
                            <td class="month">Dec &#62;</td>
                        </tr>
                        <tr>
                            <td class="day">Sun</td>
                            <td class="day">Mon</td>
                            <td class="day">Tue</td>
                            <td class="day">Wed</td>
                            <td class="day">Thu</td>
                            <td class="day">Fri</td>
                            <td class="day">Sat</td>
                        </tr>
                        <tr>
                            <td>Oct 28</td>
                            <td>29</td>
                            <td>30</td>
                            <td>31</td>
                            <td>Nov 1</td>
                            <td>2</td>
                            <td>3</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                            <td>8</td>
                            <td>9</td>
                            <td>10</td>
                        </tr>
                        <tr>
                            <td>11</td>
                            <td>12</td>
                            <td>13</td>
                            <td>14</td>
                            <td>15</td>
                            <td>16</td>
                            <td>17</td>
                        </tr>
                        <tr>
                            <td>18</td>
                            <td>19</td>
                            <td>20</td>
                            <td>21</td>
                            <td>22</td>
                            <td>23</td>
                            <td>24</td>
                        </tr>
                        <tr>
                            <td>25</td>
                            <td>26</td>
                            <td>27</td>
                            <td>28</td>
                            <td>29</td>
                            <td>30</td>
                            <td>Dec 1</td>
                        </tr>
                    </table>
                </div>
                <div id="byFantasyDiv" style="visibility:hidden; position:absolute; top: 110px; left: 180px;">
                    <f:view>
                        <h:form id="fantasyScheduleForm">
                            <h:commandButton value="Week #{scheduleBean.currentWeek.week-1}" style="#{scheduleBean.currentWeek.week == 1 ? 'visibility:hidden;' : 'cursor:pointer;border:none; background:none;font-size:12px;'}">
                                <f:ajax render="fantasyScheduleForm" listener="#{scheduleBean.previousWeek()}"/>
                            </h:commandButton>
                            <h:outputText value="Week #{scheduleBean.currentWeek.week}"/>
                            <h:commandButton value="Week #{scheduleBean.currentWeek.week+1}" style="#{scheduleBean.currentWeek.week == 14 ? 'visibility:hidden;' : 'cursor:pointer;border:none; background:none;font-size:12px;'}">
                                <f:ajax render="fantasyScheduleForm" listener="#{scheduleBean.nextWeek()}"/>
                            </h:commandButton>
                            <h:dataTable id="fantasymatchschedule" value="#{scheduleBean.fantasyMathchList}" var="item">
                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="Score"/>
                                    </f:facet>
                                    <h:outputText value="#{item.homeScore}"/>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="Home Team"/>
                                    </f:facet>
                                    <h:outputText value="#{item.homeTeamId.name}"/>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="Away Team"/>
                                    </f:facet>
                                    <h:outputText value="#{item.awayTeamId.name}"/>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="Score"/>
                                    </f:facet>
                                    <h:outputText value="#{item.awayScore}"/>
                                </h:column>
                            </h:dataTable>
                        </h:form>
                    </f:view>
                </div>
            </div>
    </div>
    </div>
    </h:body>
</html>
